<template>
  <div
    class="LEDManage"
    ref="boxTheSize"
  >
    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="24">
        <div class="grid-content bg-purple-dark">
          <div class="tltle_box">
            <el-row :gutter="20">
              <el-col :sm="24" :md="14" :lg="18" style="padding:10px 5px">
                <div class="tltle_box_l">
                  <div
                    class="l_select"
                    v-if="Invoking.forFunctionCode('userGroup:selectPage')"
                  >
                    <el-select
                      v-model="selectSearch"
                      clearable
                      placeholder="全部用户组"
                      @change="seekTableList(2)"
                    >
                      <el-option
                        v-for="item in userOptions"
                        :key="item.uGroupId"
                        :label="item.userGroupName"
                        :value="item.uGroupId"
                      ></el-option>
                    </el-select>
                  </div>

                  <div class="Material_r">
                    <el-input
                      placeholder="请输入关键字"
                      clearable
                      v-model="inputText"
                      @clear="seekTableList(1)"
                    ></el-input>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="seekTableList(2)"
                      >搜索</el-button
                    >
                  </div>
                </div>
              </el-col>
              <el-col :sm="24" :md="8" :lg="6" style="padding:5px">
                <div class="tltle_box_r">
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除组"
                    placement="top"
                  > -->
                    <el-button
                      circle
                      @click="removeGroup"
                      v-if="checkPerssion('userGroup:deleteByPrimaryKey')"
                    >
                      <img src="../../assets/images/user1_03.png" alt />
                      <div> 删除组 </div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="添加组"
                    placement="top"
                  > -->
                    <el-button
                      circle
                      @click="
                        addUser = true;
                        flag = true;
                      "
                      v-if="checkPerssion('userGroup:addUserGroup')"
                    >
                      <img src="../../assets/images/user2_03.png" alt />
                      <div> 添加组 </div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="配置终端组"
                    placement="top"
                  > -->
                    <el-button
                      circle
                      @click="TerminalGroups"
                      v-if="
                        checkPerssion('userGroup:confMediaGroupToUserGroup')
                      "
                    >
                      <img src="../../assets/images/user3_03.png" alt />
                      <div>配置终端组</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="修改组名"
                    placement="top"
                  > -->
                    <el-button
                      circle
                      @click="ModifyTheSetOf"
                      v-if="checkPerssion('userGroup:updateGroupName')"
                    >
                      <img src="../../assets/images/user4_03.png" alt />
                      <div>修改组名</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="创建用户"
                    placement="top"
                  > -->
                    <el-button
                      circle
                      @click="openEstablishUser"
                      v-if="Invoking.forFunctionCode('sysUser:addUser')"
                    >
                      <img src="../../assets/images/user9_03.png" alt />
                      <div>创建用户</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="table_box">
          <zycm-table
            @zyLoadData="loadData"
            zy-table-ref="media_group_sytemuser_table"
            :zy-table-data="tabledataList"
            zy-table-height="63vh"
            zy-table-select-type="checkbox"
            @zyTableSelect="tableSelect"
          >
            <el-table-column
              prop="userName"
              label="系统用户名"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="realName" label="真实姓名" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column
              prop="userGroupName"
              label="用户组"
              min-width="100" show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="roleName" label="角色" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column
              prop="departmentName"
              label="部门"
              width="100" show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="userMobphone"
              label="联系方式"
              width="100" show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="lastTime" label="最后登录时间" width="140" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{ scope.row.lastTime | dateFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right"  width="100" >
              <template slot-scope="scope">
                <el-dropdown
                  :size="GlobalVar.sizeSet.dropdown"
                  type="primary"
                  v-if="
                    Invoking.ifFunctionCode(
                      'sysUser:updateByPrimaryKey#sysUser:adminUpdatePwd#userLog:selectPageByUid#sysUser:updateIsDelete'
                    )
                  "
                >
                  <el-button type="primary" :size="GlobalVar.sizeSet.btn">
                    更多
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native="EditTheUser(scope.row)"
                      v-if="
                        Invoking.forFunctionCode('sysUser:updateByPrimaryKey')
                      "
                      >编辑用户</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="passwordReset(scope.row)"
                      v-if="Invoking.forFunctionCode('sysUser:adminUpdatePwd')"
                      >密码重置</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="userJournal(scope.row)"
                      v-if="Invoking.forFunctionCode('userLog:selectPageByUid')"
                      >用户日志</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="removeUser(scope.row)"
                      v-if="Invoking.forFunctionCode('sysUser:updateIsDelete')"
                      >删除用户</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </zycm-table>
        </div>
      </el-col>
    </el-row>
    <!-- 新建用户组 -->
    <el-dialog
      title="新建用户组"
      :visible.sync="addUser"
      :width="this.$store.getters.offsetWidth"
      @close="NewUserGroup = ''"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-form ref="form" label-width="100px">
            <el-form-item label="用户组名">
              <el-input
                placeholder="新建用户组名"
                v-model="NewUserGroup"
              ></el-input>
            </el-form-item>
          </el-form>
          <span
            style="
              width: 100%;
              text-align: center;
              margin: 0 auto;
              height: 50px;
              display: block;
            "
            class="button_dialog"
          >
            <el-button
              style="background-color: #4d9ce0; color: #fff"
              @click="addUserClick('yes')"
              >确 定</el-button
            >
            <el-button @click="addUserClick('no')">重 置</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 密码重置 -->
    <el-dialog
      :title="
        previewData.userName
          ? '【' + previewData.userName + '】修改密码'
          : '修改密码'
      "
      :visible.sync="NewPasswodr"
      @close="
        previewData = '';
        pwdSwitch = false;
      "
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-form ref="formPassword" label-width="100px">
            <el-form-item label="新密码">
              <el-input
                placeholder="请输入新密码"
                v-model="PasswodForm.NewPassword"
                v-if="pwdSwitch"
                show-password
                maxlength="16"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input
                placeholder="请再次输入新密码"
                v-model="PasswodForm.passwordConfirm"
                show-password
                v-if="pwdSwitch"
                maxlength="16"
              ></el-input>
            </el-form-item>
          </el-form>
          <span
            style="
              width: 100%;
              text-align: center;
              margin: 0 auto;
              height: 50px;
              display: block;
            "
            class="button_dialog"
          >
            <el-button
              style="background-color: #4d9ce0; color: #fff"
              @click="resetThePassword"
              >确 定</el-button
            >
            <el-button @click="NewPasswodr = false">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 系统用户日志 -->
    <el-dialog
      :title="
        previewData.userName
          ? '【' + previewData.userName + '】系统用户日志'
          : '系统用户日志'
      "
      :visible.sync="userLog"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      @close="previewData = ''"
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="table_box">
            <zycm-table
              @zyLoadData="loadData"
              zy-table-ref="media_group_sytemuser_log"
              :zy-table-data="tabledataList"
              zy-table-height="400px"
              zy-border
            >
              <!-- <el-table stripe :data="userJournalList" height="400" ref="zdxxTab" border> -->
              <!-- <el-table-column type="index" width="60" label="序号" :index="(index)=>{return (index+1) + (query1.page-1)*query1.pageSize}"></el-table-column> -->
              <el-table-column prop="createTime" label="日志时间" width="130" show-overflow-tooltip>
                <template slot-scope="scope">{{
                  scope.row.createTime | dateFormat
                }}</template>
              </el-table-column>
              <el-table-column prop="logLevel" label="级别" width="80" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div v-show="scope.row.logLevel == 1">普通</div>
                  <div v-show="scope.row.logLevel == 2">错误异常</div>
                  <div v-show="scope.row.logLevel == 3">警告</div>
                </template>
              </el-table-column>
              <el-table-column prop="info" label="日志信息" min-width="120" show-overflow-tooltip></el-table-column>
              <!-- </el-table> -->
            </zycm-table>
          </div>
          <span
            style="
              width: 100%;
              text-align: center;
              margin: 0 auto;
              height: 50px;
              display: block;
            "
            class="button_dialog"
          >
            <el-button
              style="background-color: #4d9ce0; color: #fff"
              @click="userLog = false"
              >关 闭</el-button
            >
            <!-- <el-button>取 消</el-button> -->
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 创建/编辑系统用户 -->
    <el-dialog
      :title="
        previewData.userName
          ? '编辑系统用户【' + previewData.userName + '】'
          : '创建系统用户'
      "
      :visible.sync="establishUser"
      :width="this.$store.getters.offsetWidth"
      @close="closeEstablishUser"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-steps :active="active" align-center>
            <el-step></el-step>
            <el-step></el-step>
          </el-steps>
          <div style="margin: 25px 0 0" v-show="active == 1">
            <el-form
              :model="establishForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
            >
              <el-form-item
                label="用户名"
                class="inputTransparent"
                prop="userName"
              >
                <el-input
                  v-model="establishForm.userName"
                  @blur="verificationUser(establishForm.userName)"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="真实名"
                class="inputTransparent"
                prop="realName"
              >
                <el-input
                  v-model="establishForm.realName"
                  placeholder="请输入真实名"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="角色名"
                class="inputTransparent"
                prop="roleId"
                style="width:100%"
              >
                <el-select
                  placeholder="请选择角色名"
                  v-model="establishForm.roleId"
                >
                  <el-option
                    :label="item.roleName"
                    :value="item.roleId"
                    v-for="item in roleOptions"
                    :key="item.roleId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="所在部门"
                class="inputTransparent"
                prop="departmentId"
              >
                <el-select
                  placeholder="请选择部门"
                  v-model="establishForm.departmentId"
                >
                  <el-option
                    :label="item.departmentName"
                    :value="item.departmentId"
                    v-for="item in options"
                    :key="item.departmentId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="用户组"
                class="inputTransparent"
                prop="uGroupId"
              >
                <el-select
                  placeholder="请选择用户组"
                  v-model="establishForm.uGroupId"
                >
                  <el-option
                    :label="item.userGroupName"
                    :value="item.uGroupId"
                    v-for="item in userOptions"
                    :key="item.uGroupId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="联系方式"
                class="inputTransparent"
                prop="userMobphone"
              >
                <el-input
                  v-model="establishForm.userMobphone"
                  maxlength="11"
                  placeholder="请输入联系方式"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                class="inputTransparent"
                prop="NewPasswodr"
                v-if="flag"
              >
                <el-input
                  show-password
                  v-model="establishForm.NewPasswodr"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="flag"
                label="确定密码"
                class="inputTransparent"
                prop="password"
              >
                <el-input
                  v-model="establishForm.password"
                  placeholder="请确定密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="内容" class="auditOpinion">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  maxlength="80"
                  v-model="establishForm.info"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="active == 2">
            <div class="ConfigureTheTerminal">
              <div>选择配置终端组</div>
              <div>
                <el-radio-group v-model="radio1">
                  <el-radio-button
                    label="同步用户组配置的终端组"
                  ></el-radio-button>
                  <el-radio-button label="配置终端组"></el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="Terminal_show">
              <div class="radio11" v-show="radio1 == '同步用户组配置的终端组'">
                已同步用户组配置的终端组
              </div>
              <div v-show="radio1 == '配置终端组'">
                <!-- <el-tree
                  :data="TreeData2"
                  ref="treeCheck2"
                  accordion
                  style="height: 250px; overflow-y: scroll"
                  show-checkbox
                  node-key="value"
                  :default-expanded-keys="
                    TreeData2[0] ? [TreeData2[0].value] : []
                  "
                  :props="defaultProps1"
                  @check="checkChange1"
                  :check-strictly="strictly"
                ></el-tree> -->
                 <zycm-tree
                  style="margin: 30px 0"
                  ref="treeCheck2"
                  :zyTreeData="TreeData2"
                  @zyChenckTree="checkChange1"
                  :strictlyData="strictly"
                ></zycm-tree>
              </div>
            </div>
          </div>
          <span
            style="
              width: 100%;
              text-align: center;
              margin: 0 auto;
              height: 50px;
              display: block;
            "
            class="button_dialog"
          >
            <el-button
              style="background-color: #4d9ce0; color: #fff"
              v-show="active == 1"
              @click="establishUserNextStep"
              >下一步</el-button
            >
            <el-button
              style="background-color: #4d9ce0; color: #fff"
              v-show="active == 2"
              @click="SubmitToCreate"
              >确 定</el-button
            >
            <el-button v-show="active == 2" @click="active = 1"
              >上一步</el-button
            >
          </span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="配置终端组"
      :visible.sync="treeDialog"
      :width="this.$store.getters.offsetWidth"
      @close="TreeChecked = []"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line treeDialogbox">
          <zycm-tree
            style="margin: 30px 0"
            ref="treeCheck"
            :zyTreeData="TreeData"
            @zyChenckTree="checkChange"
            :strictlyData="strictly"
          ></zycm-tree>
          <!-- :TreeChecked="TreeChecked" -->
          <span
            style="
              width: 100%;
              text-align: center;
              margin: 0 auto;
              height: 50px;
              display: block;
            "
            class="button_dialog"
          >
            <el-button
              style="background-color: #4d9ce0; color: #fff"
              @click="submitTreeArray"
              >确 定</el-button
            >
            <el-button @click="treeDialog = false">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    // 验证手机号码
    var ifuserMobphone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else {
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
          callback(new Error("手机号码有误"));
          this.establishForm.userMobphone = "";
          return false;
        } else {
          callback();
        }
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.establishForm.NewPasswodr) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      pwdSwitch: false,
      active: 1,
      transparent: 1,
      addUser: false,
      NewPasswodr: false,
      userLog: false,
      establishUser: false,
      treeDialog: false,
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      strictly: "",
      value: "",
      tableData: [],
      options: [],
      roleOptions: [],
      userOptions: [],
      // 搜索字段
      inputText: "",
      selectSearch: "",
      // 新增用户组
      NewUserGroup: "",
      // 树形数据
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultProps1: {
        children: "data",
        label: "label",
      },
      // 勾选的配置终端组
      TreeArray: [],
      // 所有树形数据
      TreeData: [],
      // 默认勾选
      TreeChecked: [],
      // 创建/编辑系统用户
      establishForm: {
        userName: "",
        realName: "",
        roleId: "",
        departmentId: "",
        uGroupId: "",
        userMobphone: "",
        NewPasswodr: "",
        password: "",
        info: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实名", trigger: "blur" },
        ],
        userMobphone: [{ validator: ifuserMobphone, trigger: "blur" }],
        password: [{ validator: validatePass2, trigger: "blur" }],
        NewPasswodr: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        uGroupId: [
          { required: true, message: "请选择用户组", trigger: "change" },
        ],
        roleId: [
          { required: true, message: "请选择角色名", trigger: "change" },
        ],
        departmentId: [
          { required: true, message: "请选择所在部门", trigger: "change" },
        ],
      },
      radio1: "同步用户组配置的终端组",
      TreeData2: [],
      TreeChecked1: [],
      // 密码重置
      PasswodForm: {
        NewPassword: "",
        passwordConfirm: "",
      },
      // 密码选中数据
      PasswodData: "",
      userJournalData: "",
      userJournalList: [],
      flag: true,
      TerminalHeight: "",
      previewData: "",
      thisFormData: new FormData(),
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
    };
  },
  created() {
    this.tableList();
    this.currentTableLoad("media_group_sytemuser_table", true);
    this.clientHeight();
  },
  watch: {
    establishForm: {
      handler(newValue, oldValue) {},
      deep: true,
    },
    TreeData(val) {
      this.$nextTick(() => {
        this.$refs.treeCheck.$refs.treeCheck.setCheckedKeys(this.TreeChecked);
        // delete this.TreeData[0].strictly
        this.strictly = false;
      });
    },
    TreeData2(val) {
      this.$nextTick(() => {
        this.$refs.treeCheck2.$refs.treeCheck.setCheckedKeys(this.TreeChecked1);
        //this.$refs.treeCheck2.setCheckedKeys(this.TreeChecked1);
        this.strictly = false;
      });
    },
  },
  methods: {
    //给子组件刷新用
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_sytemuser_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "sysUser/selectPage",
          this.tablePageList[tableRef]
        );
        // this.ProgramSelectList = [];
      } else if (tableRef == "media_group_sytemuser_log") {
        res = await this.$http.post(
          "userLog/selectPageByUid",
          this.tablePageList[tableRef]
        );
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    //表格checkbox单点 全选
    tableSelect(selection, row, tableRef) {},
    checkPerssion(perssion) {
      if (
        this.Invoking.forFunctionCode(perssion) &&
        window.sessionStorage.getItem("uGroupId") * 1 === this.GlobalVar.usign
      ) {
        return true;
      }
      return false;
    },
    seekTableList(e) {
      let fd = new FormData();
      //终端列表查询
      if (e == 1) {
        fd.set("userName", "");
        this.currentTableLoad("media_group_sytemuser_table", true, fd);
      } else {
        fd.set("userName", this.inputText);
        fd.set("uGroupId", this.selectSearch);
        this.currentTableLoad("media_group_sytemuser_table", true, fd);
      }
      this.tableList();
    },
    clientHeight() {
      this.$nextTick(() => {
        this.TerminalHeight = this.$refs.boxTheSize.clientHeight - 95;
      });
    },
    // 分页查询系统用户信息
    async tableList() {
      // let formData = new FormData();
      let formData1 = new FormData();
      let token = window.sessionStorage.getItem("token");
      // this.thisFormData.set("zycmToken", token);
      formData1.append("zycmToken", token);

      const { data: res1 } = await this.$http.post(
        "dictionary/selectDepartment",
        formData1
      );
      const { data: res2 } = await this.$http.post(
        "roles/selectRoleInfo",
        formData1
      );
      const { data: res3 } = await this.$http.post(
        "userGroup/selectList",
        formData1
      );
      this.options = res1.data;
      this.roleOptions = res2.data;
      this.userOptions = res3.data;
    },
    async treeDataList() {//
      let formData = new FormData();
      let uid = window.sessionStorage.getItem("uid");
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("uid", uid);
      const { data: res } = await this.$http.post(
        "mediaGroup/selectGroupTree",
        formData
      );
      res.data.children.forEach((element) => {
        if (element.lastChildren == 1 && element.data == this.selectSearch) {
          this.TreeArray.push(element);
        }
      });
      res.data["ifchenck"] = true;
      // res.data["strictly"] = true;
      res.data["height"] = 300;
      res.data["key"] = "value";
      this.TreeData = [res.data];
      this.strictly = true;
    },
    // 新建用户组
    async addUserClick(e) {
      if (e == "no") {
        this.NewUserGroup = "";
        return;
      }
      if (!this.NewUserGroup) {
        this.$message({
          type: "warning",
          message: "请输入用户组名",
        });
        return;
      }
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("userGroupName", this.NewUserGroup);
      let url = "";
      if (this.flag) {
        url = "userGroup/addUserGroup";
      } else {
        formData.append("uGroupId", this.selectSearch);
        url = "userGroup/updateGroupName";
      }
      const { data: res } = await this.$http.post(url, formData);
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.addUser = false;
      this.tableList();
    },
    // 删除用户组
    removeGroup() {
      if (!this.selectSearch) {
        this.$message({
          type: "warning",
          message: "请选择需要删除的用户组",
        });
        return;
      }
      this.$confirm("此操作将永久删除用户组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let formData = new FormData();
          let token = window.sessionStorage.getItem("token");
          formData.append("zycmToken", token);
          formData.append("uGroupId", this.selectSearch);
          const { data: res } = await this.$http.post(
            "userGroup/deleteByPrimaryKey",
            formData
          );
          if (res.result == "success") {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.selectSearch = "";
            for (const key in this.tablePageList) {
              if (key == "media_group_sytemuser_table") {
                this.tablePageList[key] = "";
              }
            }
            this.currentTableLoad("media_group_sytemuser_table", true);
            this.tableList();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.currentTableLoad("media_group_sytemuser_table", true);
      this.tableList();
    },
    // 修改组
    ModifyTheSetOf() {
      if (!this.selectSearch) {
        this.$message({
          type: "warning",
          message: "请选择需要修改的用户组",
        });
        return;
      }
      let name = "";
      this.userOptions.forEach((ele) => {
        if (this.selectSearch == ele.uGroupId) {
          this.NewUserGroup = ele.userGroupName;
        }
      });
      this.addUser = true;
      this.flag = false;
    },
    // 配置终端组
    async TerminalGroups() {
      if (!this.selectSearch) {
        this.$message({
          type: "warning",
          message: "请选择用户组",
        });
        return;
      }
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("uGroupId", this.selectSearch);
      const { data: res } = await this.$http.post(
        "userGroup/getGroupIdByUGroupId",
        formData
      );
      res.data.forEach((element) => {
        this.TreeChecked.push(element.mediaGroupId);
        // this.TreeArray.push(element)
      });
      this.treeDataList();
      this.treeDialog = true;
    },
    // 发布节目树形数据
    checkChange(data, checked, node) {
      checked.halfCheckedKeys.splice(0, 1);
      this.TreeChecked = checked.checkedKeys.concat(checked.halfCheckedKeys);
    },
    checkChange1(data, checked, node) {
      this.TreeChecked1 = checked.checkedKeys.concat(
        checked.halfCheckedKeys ? checked.halfCheckedKeys : ""
      );
    },
    // 提交终端组
    async submitTreeArray() {
      let array = [];
      if (this.TreeChecked.length == 0) {
        this.$message({
          type: "warning",
          message: "终端组不能为空",
        });
        return;
      }
      array = array.concat(this.TreeChecked);
      if (("," + array.join(",") + ",").indexOf(",0,") < 0) {
        array.push(0);
      }

      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("uGroupId", this.selectSearch);
      formData.append("groudIds", array);
      const { data: res } = await this.$http.post(
        "userGroup/confMediaGroupToUserGroup",
        formData
      );
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.treeDialog = false;
      this.seekTableList(2);
    },
    // 创建用户获取终端数据
    establishUserNextStep() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          //加载用户的管理组数据并选中
          this.TreeChecked1 = [];
          if (this.previewData.uid) {
            let formData1 = new FormData();
            formData1.append("zycmToken", token);
            formData1.append("uid", this.previewData.uid);
            const { data: res1 } = await this.$http.post(
              "sysUser/selectGroupByUid",
              formData1
            );
            res1.data.forEach((element) => {
              this.TreeChecked1.push(element.mediaGroupId);
            });
          }

          //加载用户组的所有组数据
          let token = window.sessionStorage.getItem("token");
          let formData = new FormData();
          formData.append("zycmToken", token);
          formData.append("uGroupId", this.establishForm.uGroupId);
          const { data: res } = await this.$http.post(
            "mediaGroup/selectGroupXTreeUser",
            formData
          );

          res.data["ifchenck"] = true;
          // res.data["strictly"] = true;
          res.data["height"] = 300;
          res.data["key"] = "value";
          this.transformationData(res.data);
          this.TreeData2 = [res.data];
          this.strictly = true;
          /* if (res.data.data[0]) {
            res.data.data[0]["ifchenck"] = true;
            res.data.data[0]["key"] = "value";
            this.TreeData2 = res.data.data;
            this.strictly = true;
          } */
          this.active = 2;
        } else {
          return false;
        }
      });
    },
    transformationData(obj){//转换树形结构数据 {title,value,data} 转 {label,value,children}
      if(obj){
        //obj.forEach((element) => {
          obj.label = obj.title;
          obj.children = obj.data;
          obj.data = obj.value;
          for (let i = 0; i < obj.children.length; i++) {
            this.transformationDataSub(obj.children[i]);
          }
        //});
      }
    },
    transformationDataSub(subObj){
      subObj.label = subObj.title;
      subObj.children = subObj.data;
      subObj.data = subObj.value;
      for (let i = 0; i < subObj.children.length; i++) {
        this.transformationDataSub(subObj.children[i]);
      }
    },
    // 保存创建用户
    async SubmitToCreate() {
      let formData = new FormData();
      let array = [];
      let url = "";
      if (this.establishForm.uid) {
        url = "sysUser/updateByPrimaryKey";
        formData.append("uid", this.establishForm.uid);
      } else {
        url = "sysUser/addUser";
        formData.append("password", this.establishForm.password);
      }
      // if (this.TreeArray.length > 0) {
      //   this.TreeArray.forEach((element) => {
      //     array.push(element.value);
      //   });
      // } else
      // if (this.TreeChecked1.length > 0){
      //   this.TreeChecked1.forEach((element) => {
      //     array.push(element);
      //   });
      // }
      if (this.radio1 == "配置终端组" && !this.TreeChecked1[0]) {
        this.$message({
          type: "warning",
          message: "请配置终端组",
        });
        return;
      }
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("userName", this.establishForm.userName);
      formData.append("realName", this.establishForm.realName);
      formData.append("roleId", this.establishForm.roleId);
      formData.append("departmentId", this.establishForm.departmentId);
      formData.append("uGroupId", this.establishForm.uGroupId);
      formData.append("userMobphone", this.establishForm.userMobphone);
      formData.append(
        "info",
        this.establishForm.info ? this.establishForm.info : ""
      );
      if (this.radio1 !== "同步用户组配置的终端组") {
        formData.append("mediaGroupIds", this.TreeChecked1);
      }
      formData.append("isAll", this.radio1 == "同步用户组配置的终端组" ? 1 : 0);
      const { data: res } = await this.$http.post(url, formData);
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.seekTableList(2);
      this.establishUser = false;
      // this.active = 1;
      this.TreeChecked1 = [];
      this.TreeArray = [];
    },
    openEstablishUser() {
      this.active = 1;
      this.establishForm = {
        userName: "",
        realName: "",
        roleId: "",
        departmentId: "",
        uGroupId: "",
        userMobphone: "",
        info: "",
      };
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
      }

      this.flag = true;
      this.establishUser = true;
    },
    // 关闭弹框
    closeEstablishUser() {
      // this.active = 1;
      this.previewData = {
        // uid: this.previewData.uid,
      };
      this.TreeChecked1 = [];
      this.radio1 = "同步用户组配置的终端组";
      //this.$refs.treeCheck2.setCheckedKeys([]);
      this.$refs.treeCheck2.$refs.treeCheck.setCheckedKeys([]);
      // for (const key in this.$refs.ruleForm.model) {
      //   this.$refs.ruleForm.model[key] = "";
      // }
      // this.$refs.ruleForm.resetFields();
      // for (const key in this.establishForm) {
      //   this.establishForm[key] = "";
      // }
    },
    // id查详情
    async EditTheUser(e) {
      this.active = 1;
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
      }
      this.previewData = e;
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("uid", e.uid);
      const { data: res } = await this.$http.post(
        "sysUser/selectByPrimaryKey",
        formData
      );
      res.data["password"] = "";
      res.data["NewPasswodr"] = "";
      this.establishForm = res.data;
      if (res.data.isSyncUserGroup == 1) {
        this.radio1 = "同步用户组配置的终端组";
      } else {
        this.radio1 = "配置终端组";
      }
      this.flag = false;
      this.establishUser = true;
    },
    // 密码重置
    passwordReset(e) {
      this.PasswodForm = {
        passwordConfirm: "",
        NewPassword: "",
      };
      // this.$refs.formPassword.resetFields();
      this.pwdSwitch = true;
      this.NewPasswodr = true;
      this.PasswodData = e;
      this.previewData = e;
    },
    // 点击密码重置
    async resetThePassword() {
      if (this.PasswodForm.NewPassword !== this.PasswodForm.passwordConfirm) {
        this.$message({
          type: "warning",
          message: "两次密码输入不一致",
        });
        return;
      }
      if (
        this.PasswodForm.NewPassword.length < 6 ||
        this.PasswodForm.passwordConfirm.length < 6
      ) {
        this.$message({
          type: "warning",
          message: "密码长度不能低于6位",
        });
        return;
      }
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("uid", this.PasswodData.uid);
      formData.append("newPassword", this.PasswodForm.passwordConfirm);
      const { data: res } = await this.$http.post(
        "sysUser/adminUpdatePwd",
        formData
      );
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.NewPasswodr = false;
      this.PasswodForm.NewPassword = "";
      this.PasswodForm.passwordConfirm = "";
    },
    // 删除用户
    removeUser(e) {
      this.$confirm(
        "此操作将永久删除" + e.userGroupName + ", 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let formData = new FormData();
          let token = window.sessionStorage.getItem("token");
          formData.append("zycmToken", token);
          formData.append("uids", e.uid);
          const { data: res } = await this.$http.post(
            "sysUser/updateIsDelete",
            formData
          );
          if (res.result == "success") {
            this.$message({
              type: "success",
              message: res.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
          this.seekTableList(2);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 验证用户名是否占用
    async verificationUser(e) {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("userName", e);
      if (this.establishForm.uid) {
        formData.append("uid", this.establishForm.uid);
      }
      const { data: res } = await this.$http.post(
        "sysUser/selectByUserName",
        formData
      );
      if (res.data) {
        this.$message({
          type: "error",
          message: "用户名已经占用",
        });
        this.establishForm.userName = "";
      }
    },
    // 用户日志
    async userJournal(e) {
      if (e) {
        this.userJournalData = e;
        this.previewData = e;
      }
      let token = window.sessionStorage.getItem("token");
      let fd = new FormData();
      fd.set("zycmToken", token);
      fd.set("uid", this.userJournalData.uid);
      this.currentTableLoad("media_group_sytemuser_log", true, fd);
      this.userLog = true;
    },
    textPropertyClick() {
      if (this.transparent == 1) {
        this.transparent = 0;
      } else {
        this.transparent = 1;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
/deep/.el-form-item__label{
    margin-top: 1px;
}
.LEDManage {
  width: 100%;
  margin: 4.5% 0 0;
  overflow: hidden;

  .quantity {
    text-align: right;
    padding-top: 15px;
    padding-right: 5%;
    font-size: 14px;
    color: #666;

    span {
      padding: 0 10px;
    }
  }

  .table_box {
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #fff;

    /deep/.el-table {
      width: 98%;
      margin: 20px auto 0;
    }
  }

  .tltle_box {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    // height: 100px;
      padding:1%;
    width: 98%;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 5px;

    .tltle_box_l {
      display: flex;

      .l_select {
        width: 130px;

        /deep/.el-select {
          width: 70%;
          padding: 0 10px 0 5px;
        }
      }

      .Material_r {
        display: flex;

        /deep/.el-button {
          margin: 0 0 0 20px;
          height: 40px;
          background-color: #2183d8;
        }
      }
    }

    .tltle_box_r {
      display: flex;
      padding-right: 20px;

      .el-button {
        float: right;
        background-color: #f2faff;
        //  min-width: 50px;
        height: 50px;
        border: none;
        margin-left: 0;
        margin: 0 5px;
        padding: 0 5px;
        border-radius: 5px;
        font-size:12px;
        img {
          width: 26px;
          height: 26px;
          margin: 0px -12px;
        }
      }

      /deep/.el-button:hover {
        background-color: #f2f2f2;
      }
    }
  }

  .pagination {
    display: flex;
    height: 60px;
    justify-content: center;
  }

  .el-dialog {
    .auditOpinion {
      /deep/.el-form-item__label {
        line-height: 80px;
      }

      /deep/.el-form-item__label, /deep/.el-textarea__inner {
        height: 80px;
      }
    }
/deep/.el-form-item__content {
  line-height: 0
}
    .inputTransparent {
      /deep/.el-form-item__content {
        display: flex;
        // justify-content: space-around
        text-align: center;
      }
    }

    /deep/.el-pager li, /deep/.el-pagination .btn-next, /deep/ .el-pagination .btn-prev {
      border: 1px solid #eee;
      border-radius: 5px;
      margin: 0 5px;
      color: #333;
      padding: 0;
    }

    /deep/.has-gutter .el-checkbox {
      display: none;
    }

    /deep/.el-dialog {
      /deep/.el-dialog__header {
        background-color: #efefef;
        padding: 0;
        line-height: 50px;
        padding-left: 20px;
        color: #333;
        font-size: 16px;
      }

      /deep/.el-form-item__label {
        background-color: #efefef;
        border-radius: 0;
        height: 40px;
        border: 1px solid #dcdfe6;
        border-right: none;
        box-sizing: border-box;
        text-align: center;
        padding-left: 10px;
      }

     /deep/.el-dialog  /deep/.el-input__inner, /deep/.el-dialog /deep/.el-textarea__inner {
        border-radius: 0px;
      }

      /deep/.el-button {
        //padding: 12px 25px;
      }
    }

    /deep/.el-table th, .el-table tr {
      background-color: #fafafa;
    }
  }
}

.pagination {
  display: flex;
  height: 60px;
  justify-content: center;
}

.treeDialogbox .el-tree {
  height: 300px;
  overflow-y: scroll;
  margin: 30px 0;
}

.ConfigureTheTerminal {
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  padding: 20px 0 20px;
}

.Terminal_show {
  width: 100%;
  padding-bottom: 20px;

  .radio11 {
    min-height: 200px;
    width: 100%;
    line-height: 200px;
    text-align: center;
    border-radius: 10px;
    border: 1px dashed #eee;
  }
}

/deep/.el-pager li, /deep/.el-pagination .btn-next, /deep/ .el-pagination .btn-prev {
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 0 5px;
  color: #333;
  padding: 0;
}

/deep/.el-pager li.active {
  background-color: #2183d8;
  color: #fff;
}

/deep/.el-pagination__sizes {
  padding-left: 20px;
}

/deep/.el-dialog__body {
  padding: 10px 20px 15px;
}

.selectTerminal {
  /deep/.el-tree {
    background-color: #fff;
    padding: 0 0 5% 10%;
  }
}
.inputTransparent /deep/.el-select {
  width 100%
}
/deep/.el-select {
  display: block;
}

/deep/.el-dialog__header {
  background-color: #efefef;
  padding: 0;
  line-height: 50px;
  padding-left: 20px;
  color: #333;
  font-size: 16px;
}

/deep/.el-form-item__label {
  background-color: #efefef;
  border-radius: 0;
  height: 40px;
  border: 1px solid #dcdfe6;
  border-right: none;
  box-sizing: border-box;
  text-align: center;
  padding-left: 10px;
}

 /deep/.el-dialog  /deep/.el-input__inner, /deep/.el-dialog /deep/.el-textarea__inner {
  border-radius: 0px;
}

/deep/.el-button {
  //padding: 12px 25px;
}

.opinion {
  /deep/.el-form-item__label {
    height: 80px;
    line-height: 80px;
  }
}

/deep/.el-table th, .el-table tr {
  background-color: #fafafa;
}
</style>
